<template>
  <div class="panel">
    <div class="panel_body">
      <div class="d_header">
        <ul class="d_title">
          <li>
            <h4>{{item.resTitle}}</h4>
          </li>
        </ul>
        <ul class="list_operation">
          <li>
            <div class="error-recovery">
              <el-icon color="#fbcea2" size="20">
                <FolderDelete/>
              </el-icon>
              <span>纠错</span>
            </div>
          </li>
          <li>
            <div class="collect">
              <el-icon color="#fea859" size="20">
                <StarFilled/>
              </el-icon>
              <span>收藏</span>
            </div>
          </li>
          <li>
            <div class="share">
              <el-icon color="#6cdb9a" size="20">
                <Share/>
              </el-icon>
              <span>分享</span>
            </div>
          </li>
        </ul>
      </div>
      <p class="bg_body">
        <el-icon color="#ff8747">
          <Checked/>
        </el-icon>
        使用许可（请仔细阅读）：
        <router-link to="">数据使用许可</router-link>
      </p>
      <div class="list_details">
        <ul class="list_inline">
          <li>
            来源部门：
            <span class="text_primary">{{item.mdContact}}</span>
          </li>
          <li>
            重点领域：
            <span class="text_primary">{{item.resCateInfos.cateName}}</span>
          </li>
          <li>
            发布时间：
            <span class="text_primary">{{item.pubDate}}</span>
          </li>
          <li>
            更新时间：
            <span class="text_primary">{{item.mdDateUpd}}</span>
          </li>
          <li>
            开放类型：
            <span class="text_primary">{{item.OpenConditionsID}}</span>
          </li>
          <li class="text-ligth-gray">
            <el-icon class="icon">
              <View/>
            </el-icon>
            {{item.visits}}次
          </li>
          <li class="text-ligth-gray">
            <el-icon class="icon">
              <Download/>
            </el-icon>
            {{item.download}}次
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="panel_table">
    <div class="panel_table_top"></div>
    <el-tabs type="border-card">
      <el-tab-pane label="基本信息">
        <table>

        </table>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="来源部门" label-align="center" class-name="my-content" span="1">{{item.mdContact}}</el-descriptions-item>
          <el-descriptions-item label="数据量" label-align="center" >{{item.dataVolume}}</el-descriptions-item>
          <el-descriptions-item label="开放状态" label-align="center">{{item.OpenConditionsID}}</el-descriptions-item>
          <el-descriptions-item label="所属行业" label-align="center"></el-descriptions-item>
          <el-descriptions-item label="发布时间" label-align="center">{{item.pubDate}}</el-descriptions-item>
          <el-descriptions-item label="数据更新时间" label-align="center">{{item.mdDateUpd}}</el-descriptions-item>
          <el-descriptions-item label="更新频率" label-align="center">不定期</el-descriptions-item>
          <el-descriptions-item label="用户评分" label-align="center">
            <el-rate
                v-model="item.score"
                disabled
                text-color="#ff9900"
            />
          </el-descriptions-item>
          <el-descriptions-item label="部门电话" label-align="center">{{detailinfo.departPhone}}</el-descriptions-item>
          <el-descriptions-item label="部门邮箱" label-align="center">{{detailinfo.departEmail}}</el-descriptions-item>
          <el-descriptions-item label="标签" label-align="center" span="2"></el-descriptions-item>
          <el-descriptions-item label="描述" label-align="center" span="2">{{item.describtion}}</el-descriptions-item>
        </el-descriptions>
      </el-tab-pane>
      <el-tab-pane label="数据项">
        <el-table :data="tableData" border stripe style="width: 100%">
          <el-table-column prop="englishName" label="英文信息项名" width="280" />
          <el-table-column prop="chineseName" label="中文信息项名" width="450" />
          <el-table-column prop="dateType" label="数据类型" width="200"/>
          <el-table-column prop="describe" label="说明" width="320"/>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="Role">Role</el-tab-pane>
      <el-tab-pane label="Task">Task</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import {Share} from '@element-plus/icons-vue'
import useMdStore from "@/stores/useMetaData";
import {onMounted, ref} from "vue";
import axios from "axios";
const store = useMdStore()
const item = store.getDate
const detailinfo = store.getSubDetailinfo

onMounted(() =>{
  load()
})
const tableData = ref([
  {
    englishName: 'English Name',
    chineseName: '中文信息项名',
    dateType: '数据类型',
    describe: '中文描述',
  },
  {
    englishName: 'English Name',
    chineseName: '中文信息项名',
    dateType: '数据类型',
    describe: '中文描述',
  },
  {
    englishName: 'English Name',
    chineseName: '中文信息项名',
    dateType: '数据类型',
    describe: '中文描述',
  },
  {
    englishName: 'English Name',
    chineseName: '中文信息项名',
    dateType: '数据类型',
    describe: '中文描述',
  },
])
const load = () => {
  axios.get(item.onLineSrc).then(res =>{
    if (res.status === 200){
      tableData.value = res.data
    }
  }).catch(err =>{
    console.log(err)
  })
}


</script>

<style scoped>
.panel {
  position: relative;
  margin-bottom: 15px;
  border: 1px solid #eee;
}

.panel_body {
  padding: 25px 30px;
  height: 100px;
}

.d_header {
  padding-top: 5px;
  margin-bottom: 6px;
  height: 30px;
}

.d_title {
  float: left;
}

.d_title li {
  display: inline-block;
  vertical-align: middle;
}

.d_title h4 {
  font-size: 18px;
  margin: 5px 0;
  font-weight: 400;
  color: #1B8EF8;
}

.list_operation {
  padding-top: 5px;
  float: right;
  width: 250px;
}

.share {
  float: right;
  margin-right: 20px;
}

.share span {
  position: relative;
  top: -4px;
}

.collect span {
  position: relative;
  top: -4px;
}

.error-recovery span {
  position: relative;
  top: -4px;
}

.collect {
  float: right;
  margin-right: 20px;
}

.error-recovery {
  float: right;
}

.bg_body {
  padding: 6px 15px;
  background-color: #f6faff;
  color: #6d6d6d;
}

:deep(.bg_body .el-icon) {
  position: relative;
  top: 3px;
}

.bg_body a {
  font-size: 14px;
  text-decoration: underline #FF861C;
  color: #FF861C;
}

.list_details {
  margin: 10px 0;
  padding-left: 15px;
}

.list_details ul li {
  padding-right: 29px;
}

.list_inline {
  list-style: none;
  font-size: 14px;
}

.list_inline li {
  display: inline-block;
}

.text_primary {
  color: #3d79d1;
}

.text-ligth-gray {
  float: right;
  padding-right: 0 !important;
  margin-left: 28px;
  color: #aaa;
}

.panel_table {
  position: relative;
  margin-bottom: 15px;
  background-color: #fff;
  border: 1px solid #eee;
}

:deep(.el-tabs) {
  border: 0;
}

:deep(.el-tabs__nav-scroll) {
  background-color: #65a4ff;
  color: white;
}

:deep(.el-tabs__item) {
  color: white !important;
}

:deep(.el-tabs__item.is-active) {
  color: #65a4ff !important;
}

:deep(.el-tabs__item:hover) {
  color: #65a4ff !important;
  background-color: white;
}

.panel_table_top {
  height: 2px;
  background-color: #65a4ff;
}
:deep(.el-descriptions__label){
  width: 200px;
}
:deep(.el-descriptions__content){
  width: 400px;
}
</style>